<template>
  <div class="user">
    <div class="user_box">
      <div class="user_box_warp1">
        <div class="info">
          <NuxtImg src="/images/user/headsculpture_img_0.png" />
          <div>
            <p>{{ userId }}</p>
            <p v-if="activeParentTab === 1">
              {{ lang.user_tip_1 }} <span>{{ userMoney }}</span>
            </p>
            <p v-if="activeParentTab === 2">
              {{ lang.user_tip_2 }} <span>{{ userMoney }}</span>
            </p>
          </div>
        </div>
        <div class="btn" v-click-move @click="toTreasureChest">
          {{ lang.convidar }}
        </div>
      </div>
      <div class="user_box_warp2">
        <div>
          <p>{{ lang.user_left_title }}</p>
          <p>{{ lang.user_left_tip }}</p>
        </div>
        <div>
          <p>{{ lang.user_right_title }}</p>
          <p>
            {{ userStore.moneyUnit }} {{ atualMoney }}
            <span>({{ atualMoneyTip }})</span>
          </p>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
const lang: any = getCurrentPageLang("ranking");

const userStore = useUserStore();

defineProps(["activeParentTab", "activeChildTab"]);

const userId = ref("5513999999999");
const userMoney = ref("0,00");
const atualMoney = ref("0,00");
const atualMoneyTip = ref("0");

function toTreasureChest() {
  navigateTo({ name: "ranking-treasure-chest" });
}
</script>

<style scoped lang="scss">
.user {
  width: 100%;
  min-height: 3rem;
  padding: 0 0.2rem;
  margin-top: 0.3rem;
}
.user .user_box {
  width: 100%;
  height: 100%;
  background: #2c1d31;
  box-shadow: 0 0 #fff, 0 0 #000000b3, 0 0 #000000b3;
  border-radius: 0.3rem;
  border: 0.02px solid var(--border-color);
  display: flex;
  flex-direction: column;
  padding: 0.3rem 0.4rem 0.2rem;
  font-size: 0.32rem;
}
.user .user_box_warp1 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
}
.user .user_box_warp1 .info {
  display: flex;
  align-items: center;
}
.user .user_box_warp1 .info img {
  width: 1.03rem;
  height: 1.03rem;
  border-radius: 50%;
  margin-right: 0.3rem;
}
.user .user_box_warp1 .info div p:nth-of-type(1) {
  font-weight: 600;
  margin-bottom: 0.1rem;
}
.user .user_box_warp1 .info div p:nth-of-type(2) {
  color: #8b6e8b;
}
.user .user_box_warp1 .info div p:nth-of-type(2) span {
  color: #ff886d;
}
.user .user_box_warp1 .btn {
  width: 2.5rem;
  height: 0.9rem;
  background: #ffd700;
  box-shadow: 0 0 #00000080, 0 0 #00000026, 0 0 #00000026;
  border-radius: 0.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #3b1d33;
}
.user .user_box_warp1:after {
  content: "";
  width: 100%;
  height: 0.02rem;
  background: linear-gradient(
    to right,
    transparent 0%,
    transparent 10%,
    #fd66b1 50%,
    transparent 90%,
    transparent 100%
  );
  position: absolute;
  bottom: -0.25rem;
}
.user .user_box_warp2 {
  margin-top: 0.45rem;
  display: flex;
  justify-content: space-between;
  position: relative;
}
.user .user_box_warp2 div {
  width: 50%;
  text-align: center;
}
.user .user_box_warp2 div p:nth-of-type(1) {
  margin-bottom: 0.2rem;
}
.user .user_box_warp2 div p:nth-of-type(2) {
  color: #ffd700;
}
.user .user_box_warp2:after {
  content: "";
  width: 0.02rem;
  height: 100%;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    transparent 10%,
    #fd66b1 50%,
    transparent 90%,
    transparent 100%
  );
  position: absolute;
  left: 50%;
  transform: translate(-50%);
  bottom: 0;
}
</style>
